<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.js"></script>
    <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.css">
    <script src="./bootstrap-3.4.1/dist/js/bootstrap.js"></script>
    <script src="./kaoshi.js"></script>  
</head>
<style>
    .a1 {
        text-align: center;
    }

    .a2 {
        text-align: center;
        margin-top: 30px;
    }

    input {
        margin-top: 10px;
    }

    #btn {
        margin-top: 10px;
    }

    table {
        margin-top: 20px;
    }

    table th {
        text-align: center;
    }

    table td {
        text-align: center;
    }

    #x1,
    #x2 {
        border: none;
        background: #fff;
        border: 1px solid #ccc;
    }
</style>

<body>
    <div class="a1">
        <h1>学生成绩考试录入</h1>
        <select name="" id="class">
            <option>请选择学校</option>
        </select>
        <select name="" id="duan">
            <option>请选择班级</option>
        </select>
        <select name="" id="duan1">
            <option>请选择几班</option>
        </select><br>
        姓名：<input type="text" id="nam"><br>
        语文：<input type="text" id="chi"><br>
        数学：<input type="text" id="mas"><br>
        英语：<input type="text" id="eng"><br>
        <button id="btn">添加</button>
    </div>
    <button id="x1">北京市朝阳小学</button><button id="x2">北京市西城小学</button>
    <div class="a2">
        <button>语文</button>
        <button>数学</button>
        <button>英语</button>
        <button>总分</button>
    </div>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>年级-班级</th>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>总分</th>
                <th>平均分</th>
                <th>名次</th>
            </tr>
        </thead>
        <tbody id="tbd"></tbody>
    </table>
    <script>
        var grades = []

        $("#x1").click(function () {
            $("#x1").css({
                background: 'red'
            })
            $("#x2").css({
                background: 'white'
            })
        })
        $("#x2").click(function () {
            $("#x2").css({
                background: 'red'
            })
            $("#x1").css({
                background: 'white'
            })

        })


        $("#btn").click(function () {
            var nam = $("#nam").val()
            var chi = $("#chi").val()
            var mas = $("#mas").val()
            var eng = $("#eng").val()
            var mian = {
                nam: nam,
                chi: chi,
                mas: mas,
                eng: eng
            }
            grades.push(mian)
            saveData('grades',grades)
            showList()
        })

        function showList() {
            grades = localStorage.getItem('grades') ? JSON.parse(localStorage.getItem('grades')) : []
            var strHtml = ''
            for (let i in grades) {
                strHtml += `
                            <tr>
                                <td>北京市朝阳小学</td>
                                <td>${grades[i].nam}</td>
                                <td>${grades[i].chi}</td>
                                <td>${grades[i].mas}</td>
                                <td>${grades[i].eng}</td>
                                <td>80</td>
                                <td>平均分</td>
                                <td>1</td>
                            </tr>
                        `
            }

            $("#tbd").html(strHtml)
        }
        $(function () {
            showList()

            var str = '<option>请选择学校</option>'
            for (let i in names) {
                str += `
            <option value="${i}">${names[i].name}</option>
            `
            }
            $("#class").html(str)

            $('#class').change(function () {
                let index = $(this).val()
                let cityArr = names[index].duan
                let str1 = `<option>请选择班级</option>`
                for (let i in cityArr) {
                    str1 += `
                <option value="${$(this).val()}-${i}">${cityArr[i].name}</option>
                `
                }
                $("#duan").html(str1)

            })

            $('#duan').change(function () {
                let index = $(this).val()
                let indexArr = index.split('-')
                let ban = names[indexArr[0]].duan[indexArr[1]].ban
                let str2 = '<option>请选择几班</option>'
                for (let i in ban) {
                    str2 += ` 
                        <option value="${index}-${i}">${ban[i]}</option>
                        `
                }
                $("#duan1").html(str2)
            })
        })

        function saveData() {
            localStorage.setItem('grades', JSON.stringify(grades))
        }
    </script>
</body>

</html>